<template>
    <div class="aaa">
        <div class="fatieanniu">
            <div style="margin-left: 900px">

                <el-button  @click="dianjifabutiezi" type="success"  >发帖</el-button>
            </div>
        </div>
        <div class="tishi">
            ---以下是帮您搜索到的关于 {{content}} 的帖子内容---
        </div>
        <!--                  内容-->
            <div class="jinrirediang1" v-for="(p,index) in sousuotiezi" :key="index">
                <!--            帖子标题-->
                <!--                一条帖子的框框，从这里开始v-for遍历-->
                <div class="rediang1" >
                    <div id="rcorners1" >
                        {{p.classificationName}}
                    </div>
                    <router-link :to="{name:'tiezixiangqing',
                                        query:{id:p.id,
                                        type:p.classificationName,
                                        content:p.content,
                                        time:p.time
                                        }}">
                        <div class="neirong">
                            <div v-html="p.content.length > 100 ? p.content.slice(0, 100) + '...' :p.content" />
                        </div>
                    </router-link>
                    <div class="huifucisu">
                        回复({{p.count}})
                    </div>

                </div>

            </div>
        <el-row style="font-size: 30px ;margin-top: 100px">
        <!--     分页     -->
        <el-pagination
                v-show="total>0"
                :page-size="pageSize"
                :pager-count="11"
                :current-page.sync="pageNum"
                :total="total"
                @current-change="chaxuntiezi"
        >
        </el-pagination>

    </el-row>
                                    <el-dialog :title="title" :visible.sync="opentiezi" width="500px" append-to-body>
                                        <el-form ref="form" :model="tieform" :rules="rules" label-width="80px">
                                            帖子分类:
                                            <el-radio-group v-model="tieform.classificationId" v-for="(p,index) in fengleibie" :key="index">
                                                <el-radio :label="p.id">{{p.className}}</el-radio>
                                            </el-radio-group>
                                            <el-form-item label="帖子内容:">
                                                <editor v-model="tieform.content" :min-height="192"/>
                                            </el-form-item>

                                        </el-form>
                                        <div slot="footer" class="dialog-footer">
                                            <el-button type="primary" @click="fatietijiao">确 定</el-button>
                                            <el-button @click="cancel">取 消</el-button>
                                        </div>
                                    </el-dialog>
    </div>
</template>

<script>
        import Editor from '@/components/Editor';
    export default {
        name: "sousuotiezi",
        components: {
            Editor,
        },
        data() {
            return {
                sousuotiezi: [],
                opentiezi: false,
                title:'发贴',
                tieform:{
                    userId: '',
                    content:'',
                    classificationId:'',
                },
                fengleibie:[],
                // 表单校验
                rules: {},
                pageSize: 10,
                pageNum: 1,
                total: 0,
            }
        },
        created() {
            this.chaxuntiezi();
        },
        methods: {
            async getuserlll(){
                const {data:jieguo}=await this.$http.get('user/info',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.tieform.userId=jieguo.data.basicUserInformation.id
                this.basicUserInformation=jieguo.data.basicUserInformation
            },
            async chaxuntiezi() {
                console.log("帖子接口"+this.content);
                const {data: jieguo} = await this.$http.get("/topic/list?content=" + this.content + '&' + "pageNum="+this.pageNum)
                this.sousuotiezi = jieguo.data.data;
                this.total = jieguo.data.total;
            },
            //点击打开发布帖子对话框
            dianjifabutiezi(){
                this.getuserlll();
                if(this.tieform.userId != ''){
                    this.fenglei();
                    this.opentiezi=true;
                    console.log(this.fengleibie);
                }
            },

            // 表单重置
            reset() {
                this.tieform.content=''
                this.tieform.classificationId=''
            },
            // 查看类别
            async fenglei(){
                const {data:jieguo}=await this.$http.get('/classification/list',{headers:{
                        'Authorization':window.sessionStorage.getItem('token')
                    }})
                this.fengleibie=jieguo.data
            },
            // 发帖提交
            fatietijiao() {
                if (!this.tieform.classificationId) {
                    this.$message('请选择分类');
                    return false
                }
                const token = sessionStorage.getItem("token");
                this.$http.defaults.headers.common['Authorization'] = token;
                this.$http.post('topic', this.tieform).then(response => {
                    console.log(response)
                    this.opentiezi = false;
                    if (response.data.code === 200) {
                        this.$message({showClose: true, message: "发帖成功！", type: "success"})
                        this.reset();
                        this.sousuotiezi();

                    }
                });
            },
            // 取消发文按钮
            cancel() {
                this.opentiezi = false;
                this.reset();
            },
        },
        mounted() {
            //初始化
            this.chaxuntiezi();

        },
        props: {
            "content": {
                required: true,
                default: () => ""
            },
        },
        watch: {
            "content": {
                handler(newValue) {
                    if (newValue === "") {
                        this.yinshilist = []
                        this.total = 0
                        return
                    }
                    this.content = newValue;
                    this.chaxunwenzhan();
                },
                deep: true
            }


        },

    }
</script>

<style scoped>
    .aaa{
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: scroll;
        min-height: 850px;
        width: 100%;

    }
    .yierhang{
        width: 800px;
        height: 100px;
        text-align: center;
        margin-left: 200px;
        margin-top: 20px;
        background: #FFFFE0;
        border: #FFFACD solid 2px;
    }
    .jinrirediang1{
        height: 150px;
        width: 100%;
        margin-bottom:25px;
    }
    .rediang1{
        border: #FFFACD solid 2px;
        background: #FFFFE0;
        margin-top: 20px;
        margin-left: 12%;
        width: 76%;
        height: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #111111;
    }
    .neirong{
        height: 100px;
        z-index: -1;
    }
    .huifucisu{
        height: 20px;
        width: 80px;
        float: right;
        color: black;
        z-index: 1;
        /*background: #409EFF;*/
    }
    .el-button{
        margin-left: 80%;

    }
    #rcorners1 {
        border-radius: 100px;
        background: white;
        padding: 20px;
        width: 75px;
        height: 0px;
        float: right;
        text-align: center;
        color: black;
        font-size: 18px;
        border: #EAEDF1 solid 1px;
    }
    .tishi{
        width: 100%;
        height: 50px;
        color: #888888;
        font-size: 30px;
        text-align: center;
    }
    .el-button{
        margin-left: 20%;
    }
</style>
